<template>
  <div>
    <custom-table
      :columns="tableColumns"
      :action-url="'/parking/card/list'"
      :has-search="true"
      :search-data="searchData"
      :has-select="true"
      :heard-operation="heardOperation"
    >
      <template #right>
        <div class="rightBox"><i icon="el-icon-success" />本园区共计 {{ titleData.spaceNumber }} 个车位，月卡用户 {{ titleData.cardCount }} 人，车位占有率{{ titleData.proportion }}</div>
      </template>
      <template #cardStatus="{row}">
        <span v-if="row.cardStatus===0">可用</span>
        <span v-else>已过期</span>
      </template>
    </custom-table>
  </div>
</template>

<script>
import CustomTable from '@/components/CustomTable2.vue'
import { getProportionAPI } from '@/api/monthCard'

export default {
  components: { CustomTable },
  data() {
    return {
      titleData: {
        cardCount: 2,
        spaceNumber: 101,
        proportion: '50.34%'
      },
      searchData: [
        { label: '车牌号码', type: 'input', name: 'carNumber' },
        { label: '车主姓名', type: 'input', name: 'personName' },
        { label: '状态', type: 'select', name: 'cardStatus', options: [{ label: '全部', value: ' ' }, { label: '可用', value: '0' }, { label: '已过期', value: '1' }] }
      ],
      tableColumns: [
        { label: '车牌号码', prop: 'carNumber' },
        { label: '车主姓名', prop: 'personName' },
        { label: '联系方式', prop: 'phoneNumber' },
        { label: '车辆品牌', prop: 'carBrand' },
        { label: '剩余有效天数', prop: 'totalEffectiveDate' },
        { label: '状态', prop: 'cardStatus', custom: true }, // 月卡状态 0可用，1已过期
        { label: '操作', prop: 'operate', operations: [
          { label: '续费', handler: { name: '', path: '/car/renewMonthCard/' }},
          { label: '查看', handler: { name: 'read', path: '/car/viewMonthCard/' }},
          { label: '编辑', handler: { name: 'edit', path: '/car/editMonthCard/' }},
          { label: '删除', handler: { name: 'delete', url: '/parking/card/', title: '是否确定删除月卡?' }}
        ] }
      ],
      heardOperation: [
        { name: 'add', title: '添加月卡', handler: { url: '/parking/card', path: '/car/addMonthCard' }},
        { name: 'delete', title: '批量删除', handler: { url: '/parking/card' }}
      ]
    }
  },
  async created() {
    this.titleData = await getProportionAPI()
  }

}
</script>

<style>
.rightBox{
  padding: 10px 20px;
  background-color: #e6f7ff;
  border: 1px solid #a9deff;
}
</style>
